<template>
    <div class="tableMessage">
        <el-card>
            <div
                    style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0px;
        "
            >
                <div>
                    <el-button type="primary" size="small" @click="searchComponent"
                    >搜索<i class="el-icon-search el-icon--right"></i
                    ></el-button>
                    <el-button type="primary" size="small" @click="loadingData"
                    >刷新<i class="el-icon-refresh el-icon--right"></i
                    ></el-button>
                    <el-button size="small" style="margin-left:10px" @click="downModel" target="_blank">模板下载</el-button>
                    <!--                    <el-button v-if="userType == 3 || (currentOrg && currentOrg.agreement == '1')" type="primary"-->
                    <!--                               size="small"-->
                    <!--                               @click="downModel"-->
                    <!--                    >模板下载<i class="el-icon-download el-icon&#45;&#45;right"></i-->
                    <!--                    ></el-button>-->
                                        <UpLoadScvFile @loading="loadingData"></UpLoadScvFile>
                    <!--                    <el-button style="margin-left: 15px" v-if="userType == 3" :disabled="multipleSelection.length == 0"-->
                    <!--                               type="danger" size="small"-->
                    <!--                               @click="someState"-->
                    <!--                    >批量审核<i class="el-icon-magic-stick el-icon&#45;&#45;right"></i-->
                    <!--                    ></el-button>-->

                </div>
                <div></div>
                <!--                <el-button icon="el-icon-search" circle @click="searchComponent"></el-button>-->
<!--                <div style="display: flex">-->
<!--                    <div style="display: flex; align-items: center; font-weight: 600">-->
<!--                        <div-->
<!--                                style="-->
<!--                width: 90px;-->
<!--                height: 30px;-->
<!--                background-color: rgb(251, 207, 127);-->
<!--              "-->
<!--                        ></div>-->
<!--                        <span style="font-size: 14px; margin-left: 5px">用户已修改</span>-->
<!--                    </div>-->
<!--                    <div-->
<!--                            style="-->
<!--              display: flex;-->
<!--              align-items: center;-->
<!--              font-weight: 600;-->
<!--              margin-left: 20px;-->
<!--            "-->
<!--                    >-->
<!--                        <div-->
<!--                                style="width: 90px; height: 30px; background-color: pink"-->
<!--                        ></div>-->
<!--                        <span style="font-size: 14px; margin-left: 5px">用户未修改</span>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <el-table
                empty-text="暂无数据"
                size="small"
                :cell-style="stateTypeStyle"
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%"
                class="feng_table"
        >
<!--            <el-table-column-->
<!--                    v-if="$store.state.user_type == 3"-->
<!--                    align="center"-->
<!--                    type="selection"-->
<!--                    fixed-->
<!--                    width="55">-->
<!--            </el-table-column>-->
            <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    fixed
                    width="100">
            </el-table-column>
            <el-table-column align="center" fixed label="姓名" width="180">
                <template #default="scope">
                    <span class="tableHeader" @click="tableContent(scope.row.id)">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="性别" width="180">
                <template #default="scope">
                    <span>{{scope.row.gender}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="学员ID" width="180">
                <template #default="scope">
                    <span>{{scope.row.user.username}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="报名机构" width="220">
                <template #default="scope">
                    <span v-text="scope.row.org.org_name"></span>
                </template>
            </el-table-column>
<!--            <el-table-column align="center" label="报考机构" width="180">-->
<!--                <template #default="scope">-->
<!--                    &lt;!&ndash;                        <span>{{scope.row.exam_org.org_name}}</span>&ndash;&gt;-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column align="center" label="科目" width="200">
                <template #default="scope">
                    <span>{{scope.row.course.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="机构一审" width="180">
                <template #default="scope">
                    <Item
                            style="width: 100%; height: 100%"
                            :stateType="'机构一审'"
                            :currentMessage="scope.row"
                            @chekcSuccess="chekcSuccess"
                            :pid="scope.row.id"
                            :state_code="scope.row.state_code"
                    ></Item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="总部一审" width="180">
                <template #default="scope">
                    <Item
                            :stateType="'总部一审'"
                            :currentMessage="scope.row"
                            @chekcSuccess="chekcSuccess"
                            :pid="scope.row.id"
                            :state_code="scope.row.state_code"
                    ></Item>
                </template>
            </el-table-column>
<!--            <el-table-column align="center" label="报考确认书" width="180">-->
<!--                <template #default="scope">-->
<!--                    <div v-if="scope.row.signed">-->
<!--                        <el-popover-->
<!--                                placement="left-start"-->
<!--                                title="合同号"-->
<!--                                width="200"-->
<!--                                trigger="hover"-->
<!--                                :content="scope.row.contract_id">-->
<!--                            <el-button size="small" @click="lookTransation(scope.row.contract_id)"-->
<!--                                       style="margin-right: 10px;"-->
<!--                                       slot="reference">报考确认书-->
<!--                            </el-button>-->
<!--                        </el-popover>-->
<!--                    </div>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column align="center" label="机构二审" width="180">-->
<!--                <template #default="scope">-->
<!--                    <Item-->
<!--                            :currentOrg="currentOrg"-->
<!--                            :signed="scope.row.signed"-->
<!--                            :stateType="'机构二审'"-->
<!--                            :isExam="scope.row.exam_date"-->
<!--                            :currentMessage="scope.row"-->
<!--                            @loding="loadingData"-->
<!--                            @chekcSuccess="chekcSuccess"-->
<!--                            :pid="scope.row.id"-->
<!--                            :state_code="scope.row.state_code"-->
<!--                            :exam_org="scope.row.exam_org"-->
<!--                    ></Item>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column align="center" label="总部二审" width="180">-->
<!--                <template #default="scope">-->
<!--                    <Item-->
<!--                            :current-message="scope.row"-->
<!--                            :stateType="'总部二审'"-->
<!--                            @loding="loadingData"-->
<!--                            :isExam="scope.row.exam_date"-->
<!--                            @chekcSuccess="chekcSuccess"-->
<!--                            :pid="scope.row.id"-->
<!--                            :state_code="scope.row.state_code"-->
<!--                    ></Item>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column align="center" label="当前状态" width="180">
                <template #default="scope">
                    <span>{{ state_map[scope.row.state_code] }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="证件类型" width="180">
                <template #default="scope">
                    <span>{{ scope.row.card_type_display }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="证件号码" width="180">
                <template #default="scope">
                    <span>{{ scope.row.card_id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="手机号码" width="180">
                <template #default="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="机构上传时间" width="180">
                <template #default="scope">
                    <span>{{ scope.row.add_time }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="机构一审时间" width="180">
                <template #default="scope">
                    <span>{{ scope.row.add_time }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="userType == 3" align="center" label="总部预审" width="180">
                <template #default="scope">
<!--                    {{scope.row.preview}}-->
                    <el-switch
                            :disabled="scope.row.is_preview"
                            @change="preView(scope.row.id,scope.row.is_preview)"
                            v-model="scope.row.is_preview"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" width="180">
                <template #default="scope">
                    <el-input :disabled="userType == 2" size="small"
                              @change="addDetail(scope.row.note,scope.row.id)"
                              v-model="scope.row.note" placeholder="请输入备注信息"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="160">
                <template #default="scope">
                    <div style="display: flex;align-items: center;justify-content: center">
<!--                        <el-button type="danger" size="small" @click="deleteMessage(scope.row.id)">删除</el-button>-->
                        <el-button type="primary" size="small" @click="updateMessage(scope.row.id)">修改</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        </el-card>

        <el-drawer
                size="50%"
                v-model="drawer"
                title="编辑信息"
                :direction="'rtl'"
        >
            <el-form
                    :label-position="'top'"
                    ref="updateFormRef"
                    :model="updateForm"
                    status-icon
                    :rules="updateRules"
                    label-width="120px"
                    class="demo-ruleForm"
            >
                <el-row :gutter="2" justify="space-around">
                    <el-col :span="8">
                        <el-form-item prop="org_code">
                            <span>报名机构代码：</span><el-input :disabled="true" v-model="updateForm.org_code" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input placeholder="请输入您的电子邮箱" v-model="updateForm.email" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="2" justify="space-around">
                    <el-col :span="8">
                        <el-form-item label="请选择您要报读的机构" prop="">
                            <el-input :disabled="true" v-model="updateForm.org_name" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="请您选择报读薪酬管理职业技能等级课程级别" prop="course_id">
                            <el-select
                                    style="width: 100%"
                                    :disabled="true"
                                    v-model="updateForm.course_id"
                                    placeholder="请您选择报读薪酬管理职业技能等级课程级别"
                            >
                                <el-option
                                        v-for="item in courseList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="2" justify="space-around">
                    <el-col :span="8">
                        <el-form-item label="学员姓名" prop="name">
                            <el-input placeholder="请输入学员姓名" v-model="updateForm.name" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所在地区" prop="province">
                            <el-cascader
                                    style="width: 100%"
                                    :options="areaOptions"
                                    v-model="selectedOptions"
                                    @change="addressChange"
                                    :placeholder="defaultArea"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="2" justify="space-around">
                    <el-col :span="8">
                        <el-form-item label="证件类型" prop="card_type">
                            <el-select
                                    style="width: 100%"
                                    v-model="updateForm.card_type"
                                    placeholder="请选择证件类型"
                            >
                                <el-option
                                        v-for="item in cardOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="证件号码" prop="card_id">
                            <el-input placeholder="请输入您的证件号码" v-model="updateForm.card_id" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="2" justify="space-around">
                    <el-col :span="8">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input placeholder="请输入您的手机号码" :disabled="true" v-model="updateForm.phone" autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别">
                            <el-radio-group v-model="updateForm.gender">
                                <el-radio :label="'男'">男</el-radio>
                                <el-radio :label="'女'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" style="padding-top: 50px">
                    <el-col :span="2">
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(updateFormRef)"
                            >立即修改
                            </el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>

        <el-dialog width="66%" title="审核信息" v-model="dialogTableVisible">

            <el-descriptions title="报名信息" direction="vertical" :column="3" border size="small" class="margin-top">
                <template #extra>
                    <el-button
                            v-if="currentData.audit_log && currentData.audit_log.length"
                            @click="stateLog(currentData.id)"
                            type="primary"
                            size="small"
                    >审核日志
                    </el-button>
                </template>
                <el-descriptions-item label="学员ID" v-if="currentData.user">{{currentData.user.username}}
                </el-descriptions-item>
                <el-descriptions-item label="学员姓名"> {{ currentData.name }}</el-descriptions-item>
                <el-descriptions-item label="您报读的培训机构" v-if="currentData.org">
                    {{String(currentData.org.org_name).split('_')[0]}}（{{currentData.org.org_code}}）
                </el-descriptions-item>
                <el-descriptions-item label="手机号码"> {{ currentData.phone }}</el-descriptions-item>
<!--                <el-descriptions-item label="姓名拼音"> {{ currentData.last_py }} {{ currentData.first_py }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="单位名称"> {{ currentData.com_name }}</el-descriptions-item>-->
                <el-descriptions-item label="证件类型"> {{ currentData.card_type_display }}</el-descriptions-item>
                <el-descriptions-item label="证件号码"> {{ currentData.card_id }}</el-descriptions-item>
<!--                <el-descriptions-item label="单位类型"> {{ currentData.com_type_display }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="性别"> {{ currentData.gender_display }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="出生日期">{{ currentData.birthday }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="从事薪酬管理(含薪税服务)工作年限(含实习经历)"> {{ currentData.work_age }}年-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item label="最高学历"> {{ currentData.hig_edu }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="毕业年份" v-if="currentData.grad_time">-->
<!--                    {{ currentData.grad_time.split('-')[0] + '年' +currentData.grad_time.split('-')[1] + '月' }}-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item label="毕业年份" v-if="!currentData.grad_time"></el-descriptions-item>-->
                <el-descriptions-item label="工作区域"> {{ currentData.province }}/{{ currentData.city }}/{{currentData.region}}
                </el-descriptions-item>
                <el-descriptions-item label="邮箱" v-if="currentData.email">{{currentData.email}}</el-descriptions-item>
<!--                <el-descriptions-item label="相关专业"> {{ currentData.major }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="行业类型"> {{ currentData.ind_type_display }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="相关资质或证书"> {{ currentData.cert_display }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="电子邮箱"> {{ currentData.email }}</el-descriptions-item>-->
                <el-descriptions-item label="账号期限" v-if="currentData.exp_date"> {{ currentData.active_date.substr(0,10)}} 至 {{currentData.exp_date.substr(0,10)}}
                </el-descriptions-item>
                <el-descriptions-item label="账号期限" v-if="!currentData.exp_date">账号还未生成
                </el-descriptions-item>
                <el-descriptions-item label="职务" v-if="currentData.work_duty"><p
                        v-text="currentData.work_duty.split('#')[0]"></p>
                    <p v-text="currentData.work_duty.split('#')[1]"></p></el-descriptions-item>
                <el-descriptions-item label="审核状态"> {{
                    currentData.state_code == 5 && !currentData.exam_org ? '总部一审通过/待报考' : currentData.state_code > 3 ?
                    '报名信息审核完成' : state_map[currentData.state_code]
                    }}
                </el-descriptions-item>
            </el-descriptions>


            <el-descriptions v-show="currentData.exam_date" title="报考信息" style="margin-top: 20px" direction="vertical"
                             :column="3" border size="mini" class="margin-top">
                <template slot="extra">
                    <el-button
                            v-if="currentData.signed"
                            @click="lookTransation(currentData.contract_id)"
                            type="primary"
                            size="small"
                    >查看报考确认书
                    </el-button
                    >
                </template>
                <el-descriptions-item label="您报考的培训机构" v-if="currentData.exam_org"> {{ currentData.exam_org ?
                    currentData.exam_org.org_name:'' }}（{{currentData.exam_org.org_code}}）
                </el-descriptions-item>
                <el-descriptions-item label="是否属于再次报考"> {{ currentData.make_up_count > 0 ? '是':'否' }}
                </el-descriptions-item>
                <el-descriptions-item label="考试城市" v-if="currentData.exam_date"> {{ currentData.exam_date.exam_city }}
                </el-descriptions-item>
                <el-descriptions-item label="考试时间" v-if="currentData.exam_date"> {{ currentData.exam_date.exam_date }}
                </el-descriptions-item>
                <el-descriptions-item label="准考证号" v-if="currentData.state_code == 8"> {{ currentData.exam_code }}
                </el-descriptions-item>
                <el-descriptions-item label="审核状态"> {{ state_map[currentData.state_code] }}</el-descriptions-item>
            </el-descriptions>

        </el-dialog>

        <el-dialog v-if="stateLogList.length > 0" title="审核日志" v-model="stateLogVisible">
            <el-table
                    :data="stateLogList"
                    :default-sort="{ prop: 'add_time', order: 'descending' }"
                    style="width: 100%"
            >
                <el-table-column prop="add_time" label="日期" sortable width="180" />
                <el-table-column label="审核状态" width="180" >
                    <template #default="scope">
                        <span>{{state_map2[scope.row.method]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="note" label="审核信息"  />
            </el-table>
        </el-dialog>

        <el-dialog v-if="someStateResults" title="批量审核结果" :visible.sync="someSateResultVisible">
            <p style="text-align: left">成功条数:<span style="color: green">{{ someStateResults.success }}</span> 失败条数:<span
                    style="color: red">{{ someStateResults.failed.length }}</span></p>
            <el-table
                    :data="someStateResults.failed"
                    style="width: 100%">
                <el-table-column
                        prop="pid"
                        label="ID"
                        width="170"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        prop="errors"
                        label="错误信息">
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="切换审核方法" v-model="dialogSomeSateVisible" width="300px">
            <el-select size="small" v-model="someStateMethod" placeholder="请选择活动区域">
                <el-option label="总部一审" value="admin_pass_1"></el-option>
                <el-option label="总部二审" value="admin_pass_2"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogSomeSateVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitSomeState">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {useRouter} from 'vue-router';
    import {useStore} from 'vuex';
    import {reactive,ref,toRefs,toRaw,computed} from 'vue';
    import {areaData, textToCode, codeToText} from "@/utils/JdAreaData/areaData";
    import {
        viewContract,
        addDetail,
        stateLog,
        check,
        getOrg,
        profile,
        studentList,
        edit_user_profile, delete_user_profile
    } from '../../request/api'
    import UpLoadScvFile from "../uploadCsvFile/UpLoadCsvFile.vue";
    import {userType} from "@/util/base";
    import Item from "../Item";
    import {formatDate} from "../../utils/formatDate";
    import {batchCheck} from "@/request/api";
    import {ElMessage,ElMessageBox} from "element-plus";

    export default {
        name: "Table",
        filters: {
            formatDate2(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy年MM月dd日')
            },
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            expDate(time) {
                let date = new Date(time);
                date.setFullYear(date.getFullYear() - 1);
                return formatDate(date, 'yyyy年MM月dd日')
            }
        },
        props: {
            tableData: {
                type: Array,
            },
            currentOrg: {
                type: Object
            }
        },
        data() {
            return {
                someStateResults: null,
                someSateResultVisible: false,
                dialogSomeSateVisible: false,
                someStateMethod: 'admin_pass_1',//批量审核方法
                stateLogList: [],
                stateLogVisible: false,
                userType: 0,
                searchIsShow: true,
                state_map2: {
                    org_pass_1: '机构一审通过',
                    admin_pass_1: '总部一审通过',
                    org_pass_2: '机构二审通过',
                    admin_pass_2: '总部二审通过',
                    org_reject_1: '机构一审驳回',
                    admin_reject_1: '总部一审驳回',
                    org_reject_2: '机构二审驳回',
                    admin_reject_2: '总部二审驳回',
                    contract_reject: '报考确认书驳回'
                },
                state_map_style: {
                    0: "机构一审驳回",
                    1: "机构一审",
                    2: "机构一审驳回",
                    3: "总部一审",
                    4: "机构二审驳回",
                    5: "机构二审",
                    6: "机构二审驳回",
                    7: "总部二审",
                    8: "全部审核通过",
                },
                state_map: {
                    0: "机构一审驳回",
                    1: "机构一审待审",
                    2: "总部一审驳回",
                    3: "总部一审待审",
                    4: "机构二审驳回",
                    5: "机构二审待审",
                    6: "总部二审驳回",
                    7: "总部二审待审",
                    8: "全部审核通过",
                },
                dialogTableVisible: false,
                currentData: {},
                multipleSelection: []
            };
        },
        computed: {},
        created() {
            console.log("table", this.$store.state.user_type);
            this.userType = this.$store.state.user_type;
        },
        setup(props,{emit}) {
            let store = useStore();
            let router = useRouter();
            const updateFormRef = ref(null)

            let data = reactive({
                drawer:false,
                areaOptions: areaData, //省市区三级联动
                selectedOptions: [], //选择后的省市区对象数组
                is_sign_up:false,
                cardOptions: [
                    {id: 1, name: "居民身份证"},
                    {id: 2, name: "护照"},
                    {id: 3, name: "港澳台胞身份证"},
                ],
                courseList: [],
                updateForm: {
                    org_code: '',
                    org_name: '',
                    course_id: '',
                    name: '',
                    province: '',
                    city: '',
                    region: '',
                    card_type: 1,
                    card_id: '',
                    phone: '',
                    email:'',
                    gender:'男'
                },
                updateFormCopy:null,
                currentUpdateId:null
            })
            let getCurrentRegister = (currentId) =>{
                studentList({pid:currentId}).then(res =>{
                    console.log('当前修改信息',res.results[0])
                    data.currentUpdateId = currentId;
                    data.updateForm.email = res.results[0].email;
                    data.updateForm.name = res.results[0].name;
                    data.updateForm.phone = res.results[0].phone;
                    data.updateForm.card_id = res.results[0].card_id;
                    data.updateForm.card_type = res.results[0].card_type;
                    data.updateForm.org_code = res.results[0].org.org_code;
                    data.updateForm.org_name = res.results[0].org.org_name;
                    data.updateForm.province = res.results[0].province;
                    data.updateForm.city = res.results[0].city;
                    data.updateForm.region = res.results[0].region;
                    data.updateForm.course_id = String(res.results[0].course.name);
                    data.updateForm.gender = res.results[0].gender;
                    try {
                        data.selectedOptions = textToCode([data.updateForm.province, data.updateForm.city, data.updateForm.region])
                    }catch (e) {
                        console.log(e)
                    }
                    data.updateFormCopy = JSON.parse(JSON.stringify(data.updateForm));
                })
            }
            let defaultArea = computed(() =>{
                return `${data.updateForm.province}/${data.updateForm.city}/${data.updateForm.region}`
            })
            let updateMessage = (pid) =>{
                data.drawer = true
                getCurrentRegister(pid)
            }
            const addressChange = (arr) =>{
                console.log(arr);
                [data.updateForm.province, data.updateForm.city, data.updateForm.region] = codeToText(arr);
            }

            let deleteMessage = (pid) => {
                ElMessageBox.confirm(
                    '是否删除该用户',
                    '删除信息',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        delete_user_profile({pid:pid}).then(res =>{
                            console.log(res)
                            emit('loading')
                            ElMessage({
                                type: 'success',
                                message: '删除成功',
                            })
                        })
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '已取消',
                        })
                    })
            }
            const validateOrgCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('机构代码不能为空'))
                } else {
                    callback()
                }
            };
            const validateCourseId = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('报读课程不能为空'))
                } else {
                    callback()
                }
            };
            const validateCardId = (rule, value, callback) => {
                if (data.updateForm.card_type == 1) {
                    let reg =
                        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                    if (value === "") {
                        callback(new Error("请填写身份证号码"));
                    } else if (!reg.test(value)) {
                        callback(new Error("身份证格式错误"));
                    } else {
                        callback();
                    }
                } else if (data.updateForm.card_type == 2) {
                    let reg = /^[A-Z,a-z,\d]+$/;
                    if (value === "") {
                        callback(new Error("请填写护照编码"));
                    } else if (!reg.test(value)) {
                        callback(new Error("护照格式错误"));
                    } else {
                        callback();
                    }
                } else if (data.updateForm.card_type == 3) {
                    let reg = /^[A-Z,a-z,\d]+$/;
                    if (value === "") {
                        callback(new Error("请填写港澳台胞证"));
                    } else if (!reg.test(value)) {
                        callback(new Error("证件格式错误"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            const validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('姓名不能为空'))
                } else {
                    callback()
                }
            };
            const validateCardType = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择证件类型'))
                } else {
                    callback()
                }
            };
            const validatePhone = (rule, value, callback) => {
                let phoneRule = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
                if (value === '') {
                    callback(new Error('手机号码不能为空'))
                } else if (!phoneRule.test(value)) {
                    callback(new Error("手机号码格式错误"))
                } else {
                    callback()
                }
            };
            const province_rule = (rule, value, callback) => {
                if (data.updateForm.province === "" || data.updateForm.province == null) {
                    callback(new Error("请选择地区"));
                } else {
                    callback();
                }
            };
            const email_rule = (rule, value, callback) => {
                let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if (value === '') {
                    callback(new Error('电子邮箱不能为空'))
                } else if (!reg.test(value)) {
                    callback(new Error("电子邮箱格式错误"));
                } else {
                    callback()
                }
            };
            const updateRules = reactive({
                org_code: [{validator: validateOrgCode, trigger: 'blur'}],
                course_id: [{validator: validateCourseId, trigger: 'change'}],
                card_id: [{validator: validateCardId, trigger: 'blur'}],
                name: [{validator: validateName, trigger: 'blur'}],
                card_type: [{validator: validateCardType, trigger: 'blur'}],
                phone: [{validator: validatePhone, trigger: 'blur'}],
                province:[{validator: province_rule, trigger: 'blur'}],
                email:[{validator: email_rule, trigger: 'blur'}],
            })

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        ElMessageBox.confirm(
                            '是否确定并修改该用户信息',
                            '确认信息',
                            {
                                confirmButtonText: '确认',
                                cancelButtonText: '取消',
                                type: 'warning',
                            }
                        )
                            .then(() => {
                                console.log('123')
                                let params = {pid:data.currentUpdateId};
                                for (let item in data.updateForm){
                                    if(data.updateForm[item] !== data.updateFormCopy[item]){
                                        params[item] = data.updateForm[item];
                                    }
                                }
                                console.log('修改参数',params);

                                edit_user_profile(params).then(res =>{
                                    console.log(res);
                                    data.drawer = false;
                                    emit('ItemCheckSuccess');
                                    ElMessage({
                                        type: 'success',
                                        message: '修改成功',
                                    })
                                })
                            })
                            .catch(() => {
                                data.drawer = false
                                ElMessage({
                                    type: 'info',
                                    message: '已取消',
                                })
                            })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            return {
                defaultArea,
                deleteMessage,
                updateMessage,
                addressChange,
                validatePhone,
                ...toRefs(data),
                updateFormRef,
                updateRules,
                submitForm,
            }
        },
        methods: {
            submitSomeState() {
                this.dialogSomeSateVisible = false;
                console.log(this.multipleSelection, this.someStateMethod)
                batchCheck({pid_list: this.multipleSelection, method: this.someStateMethod}).then(res => {
                    console.log(res);
                    this.$message({type: 'success', message: '操作成功'})
                    this.someSateResultVisible = true;
                    this.someStateResults = res
                    this.$emit("loading");
                })
            },
            someState() {
                this.dialogSomeSateVisible = true;
            },
            //批量审核
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for (let item of val) {
                    this.multipleSelection.push(item.id)
                }
            },
            currentLog() {
                console.log('获取当前审核日志');
            },
            preView(pid,preview) {
                console.log('pid',pid,preview)
                addDetail({pid: pid, note: '', preview: preview ? 1:0}).then(res => {
                    console.log(res)
                    this.$message({type: 'success', message: '已提交'})
                    // this.$emit("loading");
                })
            },
            downModel() {
                window.open('https://api.ptaedu.cn/static/files/薪酬管理模板ptaedu.xls')
            },
            //合同驳回
            rejectContract(pid) {
                this.$confirm('是否对此合同进行驳回操作', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {pid: pid, method: 'contract_reject'}
                    check(params).then(res => {
                        console.log('合同驳回', res)
                        this.$message({
                            type: 'success',
                            message: '驳回成功!'
                        });
                    }).catch(err => {
                        this.$message({type: 'error', message: err.msg + '，' + err.errors})
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //总部添加备注信息
            addDetail(content, pid) {
                console.log('content', content + '-' + pid)
                this.$confirm('是否为改用户修改备注信息', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {'note': content, 'pid': pid, 'preview': false}
                    addDetail(params).then(res => {
                        console.log(res)
                    })
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                }).catch(() => {
                    this.loadingData();
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //查看合同
            lookTransation(contract_id) {
                viewContract({contract_id: contract_id}).then((res) => {
                    window.open(res.view_url);
                });
            },
            stateTypeStyle({column,row,columnIndex}) {
                if (this.userType == 2) {
                    if (
                        columnIndex == 5 &&
                        row.state_code < 3 &&
                        row.exam_date == null
                    ) {
                        console.log('当前审核状态', row.audit_log.length)
                        if (
                            row.audit_log.length > 0 && row.audit_log[0].method.includes('reject') &&
                            row.audit_log[0].add_time > (row.last_edit_date || '2000-09-10')
                        ) {
                            console.log('未修改')
                            return {
                                backgroundColor: 'pink'
                            };
                        } else if (
                            row.audit_log.length > 0 && row.audit_log[0].method.includes('reject') &&
                            row.audit_log[0].add_time < (row.last_edit_date || '2000-09-10')
                        ) {
                            console.log('已修改')
                            return {
                                backgroundColor: '#fbcf7f'
                            }
                        } else {
                            return {
                                backgroundColor:'#fff'
                            }
                        }
                    }
                    if (
                        columnIndex == 9 &&
                        3 < row.state_code < 7 &&
                        row.exam_date != null &&
                        row.exam_org.org_code === this.currentOrg.org_code

                    ) {
                        if (
                            (row.audit_log.length > 0 && row.audit_log[0].method.includes('reject') &&
                                row.audit_log[0].add_time < (row.last_edit_date || '2000-09-10')) || (
                                row.audit_log && row.audit_log[0].method.includes('contract_reject') &&
                                row.signed
                            )
                        ) {
                            return {
                                backgroundColor:"#fbcf7f"
                            }
                        } else if (
                            row.audit_log.length > 0 && row.audit_log[0].method.includes('reject') &&
                            audit_log[0].add_time > (row.last_edit_date || '2000-09-10')
                        ) {
                            return {
                                backgroundColor:'pink'
                            };
                        } else {
                            return {
                                backgroundColor:'#fff'
                            };
                        }
                    }
                }
                // if (this.userType == 3){
                //     if (
                //         columnIndex == 11 &&
                //         row.state_code == 7 &&
                //         row.exam_date != null
                //
                //     ) {
                //         if (row.audit_log && row.audit_log[0].method.includes('contract_reject') && row.signed) {
                //             return "background-color:#fbcf7f";
                //         } else if (row.audit_log && row.audit_log[0].method.includes('contract_reject') && !row.signed) {
                //             return {
                //                 backgroundColor: 'pink'
                //             };
                //         } else {
                //             return {
                //                 backgroundColor:'#fff'
                //             }
                //         }
                //     }
                // }
                return {
                    textAlign:'center'
                };
            },
            loadingData() {
                // alert('加载数据')
                this.$emit("loading");
            },
            handleClick(row) {
                console.log(row);
            },
            searchComponent() {
                this.searchIsShow = !this.searchIsShow;
                this.$emit("search", this.searchIsShow);
            },
            //审核成功
            chekcSuccess() {
                this.$emit("ItemCheckSuccess");
            },
            //审核日志
            stateLog(pid) {
                stateLog({pid: pid}).then(res => {
                    this.stateLogVisible = true
                    console.log('审核日志', res)
                    this.stateLogList = res.sort((a, b) => b.add_time - a.add_time);
                })
            },
            tableContent(item_id) {
                console.log('tableData', this.tableData)
                for (let item of this.tableData) {
                    if (item.id == item_id) {
                        this.currentData = item;
                        console.log(this.currentData);
                    }
                }
                this.dialogTableVisible = true;
            },
        },
        components: {
            Item,
            UpLoadScvFile,
        },
    };
</script>

<style>
    .el-table .el-table__cell{
        z-index: unset;
        padding: 3px;
    }

    .tableMessage .el-tag {
        width: 100%;
    }
</style>

<style scoped>
    .tableHeader {
        color: #008b8b;
        cursor: pointer;
        font-weight: 700;
        border-bottom: 2px blueviolet solid;
    }

    .tableHeader:hover {
        color: rebeccapurple;
    }
</style>
